<template>
<!--  <baidu-map-->
<!--    id="BaiduMap"-->
<!--    :center="center"-->
<!--    :zoom="zoom"-->
<!--    @ready="handler"-->
<!--    :scroll-wheel-zoom="true"-->
<!--  >-->
<!--    <bm-boundary name="浙江省杭州市" :strokeWeight="2" strokeColor="blue"></bm-boundary>-->
<!--    <bm-point-collection-->
<!--      :points="points"-->
<!--      shape="BMAP_POINT_SHAPE_CIRCLE"-->
<!--      color="red"-->
<!--      size="BMAP_POINT_SIZE_NORMAL"-->
<!--      @click="clickHandler">-->
<!--    </bm-point-collection>-->
<!--  </baidu-map>-->
  <div id="chart">echarts百度地图</div>
</template>
<script>
import baiduJSON from '../../../assets/json/hangzhou-tracks.json'
import 'echarts/extension/bmap/bmap'
import { MP } from '../../../assets/map.js'
export default {
  name: 'MyBaiduMap',
  components: {
  },
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 14,
      points: [
        {
          lng: 120.038201,
          lat: 30.226134
        }
      ]
    }
  },
  methods: {
    mapReady ({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13)
      map.centerAndZoom(this.point, 6)
    },
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 120.038201
      this.center.lat = 30.226134
      this.zoom = 15
      BMap.enableScrollWheelZoom(true)
    },
    addPoints () {
      const points = []
      for (var i = 0; i < 100; i++) {
        const position = {lng: Math.random() + 120, lat: Math.random() + 30}
        points.push(position)
      }
      this.points = points
    },
    clickHandler (e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`)
    }
  },
  mounted () {
    // this.addPoints()

    this.$nextTick(function () {
      var _this = this
      MP(_this.ak).then((BMap) => {
        let myChart = _this.$echarts.init(document.getElementById('chart'))
        let pointsData = baiduJSON // 其实这一步是多余的
        // 把数据处理成需要的格式，只是把数值都改成了1，具体项目可以根据自己实际来处理
        var points = [].concat.apply(
          [],
          pointsData.map(function (track) {
            return track.map(function (seg) {
              return seg.coord.concat([1])
            })
          })
        )

        let option // eslint-disable-line no-unused-vars
        myChart.setOption(
          (option = {
            animation: false,
            bmap: {
              center: [120.13066322374, 30.240018034923],
              zoom: 14,
              roam: true
            },
            visualMap: {
              show: true,
              top: 'top',
              min: 0,
              max: 5,
              seriesIndex: 0,
              calculable: true,
              inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
              }
            },
            series: [
              {
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 5,
                blurSize: 6
              }
            ]
          })
        )

        var bmap = myChart.getModel().getComponent('bmap').getBMap()
        bmap.addControl(new BMap.MapTypeControl())
      })
    })
  }
}
</script>
<style scoped>
#BaiduMap {
  width: 100%;
  height: 100%;
}
</style>
